<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
  <title>云上运动热力图</title>
  <style>
    #china-map {
      width: 800px;
      height: 800px;
      margin: auto;
    }
  </style>
  <script type="text/javascript" src="./js/echarts.min.js"></script>
  <script type="text/javascript" src="./js/map/china.js"></script>
    <script type="text/javascript" src="./libs/axios.min.js"></script>

</head>

<body>
  <div id="china-map"></div>
  <div id="participation">
    参与率 = 视频总数/(员工总数x活动已开展天数) <br>
    此数据截止2月16日<br>
  </div>
  <img src="image/1.png"  />
  <div id="showinfo"></div>

  <script>

      var data = [ 
        {
          "provinceName": "广西壮族自治区",
          "provinceShortName": "广西",
          "videoCount": 150,
          "employCount": 0,
          "participation": 13,
          "remark": "",
          "comment": "",
          "locationId": 450000,
          "cities": [
            {
              "cityName": "北海",
              "videoCount": 103,
              "employCount": 53,
              "participation": 93.64,
              "remark": "",
              "locationId": 450500
            },
            {
              "cityName": "南宁",
              "videoCount": 246,
              "employCount": 183,
              "participation": 67.21,
              "remark": "",
              "locationId": 450100
            },
            {
              "cityName": "桂林",
              "videoCount": 127,
              "employCount": 66,
              "participation": 96.21,
              "remark": "",
              "locationId": 450300
            },
            {
              "cityName": "柳州",
              "videoCount": 79,
              "employCount": 57,
              "participation": 69.30,
              "remark": "",
              "locationId": 450200
            },
            {
              "cityName": "防城港",
              "videoCount": 31,
              "employCount": 24,
              "participation": 64.58,
              "remark": "",
              "locationId": 450600
            },
            {
              "cityName": "河池",
              "videoCount": 11,
              "employCount": 13,
              "participation": 42.31,
              "remark": "",
              "locationId": 451200
            },
            {
              "cityName": "玉林",
              "videoCount": 111,
              "employCount": 69,
              "participation": 80.43,
              "remark": "",
              "locationId": 450900
            },
            {
              "cityName": "梧州",
              "videoCount": 63,
              "employCount": 41,
              "participation": 76.83,
              "remark": "",
              "locationId": 450400
            },
            {
              "cityName": "贵港",
              "videoCount": 54,
              "employCount": 29,
              "participation": 93.1,
              "remark": "",
              "locationId": 450800
            },
            {
              "cityName": "钦州",
              "videoCount": 65,
              "employCount": 34,
              "participation": 95.59,
              "remark": "",
              "locationId": 450700
            },
            {
              "cityName": "百色",
              "videoCount": 50,
              "employCount": 27,
              "participation": 92.59,
              "remark": "",
              "locationId": 451000
            },
            {
              "cityName": "贺州",
              "videoCount": 0,
              "employCount": 0,
              "participation": 0,
              "remark": "",
              "locationId": 451100
            },
            {
              "cityName": "分公司",
              "videoCount": 255,
              "employCount": 159,
              "participation": 79.69,
              "remark": "",
              "locationId": 451300
            },
            {
              "cityName": "崇左",
              "videoCount": 0,
              "employCount": 0,
              "participation": 0,
              "remark": "",
              "locationId": 451400
            }
          ]
        }
      ];
    //   var url = "./province.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
    //   var request = new XMLHttpRequest();
    //   request.onreadystatechange = function () {/*XHR对象获取到返回信息后执行*/
    //     if (request.readyState === 4 && request.status === 200) {/*返回状态为200，即为数据获取成功*/
    //        data = JSON.parse(request.responseText);
    //       console.log(data);
    //     }
    //   }
    // request.open("get", url, false);/*设置请求方法与路径*/
    // request.send(null);/*不发送数据到服务器*/


    var myChart = echarts.init(document.getElementById('china-map'));

    var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];

    var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

   

    var proPieces = [
      {min: 90, max: 100, label: '参与率>90%', color: '#FF3307'}, //#372a28
      {min: 80, max: 89.99, label: '参与率>80%', color: '#DC725C'},  //#4e160f
      {min: 60, max: 79.99, label: '参与率>60%', color: '#DC9686'},  //#974236
      {min: 40, max: 59.99, label: '参与率>40%', color: '#DCB9B1'},  //#ee7263
      {min: 1, max: 39.99, label: '参与率<40%', color: '#DCDCDC'}     //#f5bba7
    ];


    //initEcharts("china", "中国");
	showProvince("广西", "guangxi");



    // 初始化echarts
    function initEcharts(pName, Chinese_) {
      console.log("pName:" + pName);
      var tmpSeriesData = [];
		data.forEach((item)=>{
		  //执行代码
		  if (item.provinceShortName === pName) {
			item.cities.forEach((it) => {
			  var ser = {
				name: it.cityName,
				value: it.participation
			  };
			  tmpSeriesData.push(ser);
			})
		  }
		})

      console.log(tmpSeriesData);

      var option = {
        title: {
          //text: pName + '疫情图',
		  text: '点击地区查看参与率',
          left: 'center'
        },
        visualMap: {
          type: 'piecewise',
          pieces: proPieces,
          textStyle: {
            color: '#000000'
          },
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          },
          top: '50%'
        },
        series: [
          {
            name: pName,
            type: 'map',
            mapType: pName,
            roam: false,//是否开启鼠标缩放和平移漫游
            itemStyle: {//地图区域的多边形 图形样式
              normal: {//是图形在默认状态下的样式
                label: {
                  show: true,//是否显示标签
                  textStyle: {
                    //color: "rgba(255,255,255,0)"
					color:"#323232"
                  }
                }
              },
              emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: { show: true }
              }
            },
            data: tmpSeriesData,
            top: "3%"//组件距离容器的距离
          }
        ]
      };

      myChart.setOption(option);

      myChart.off("click");
      myChart.on('click', function (param) {
          console.log(param.name);
		  if (param.name=='崇左' || param.name=='来宾' || param.name=='贺州' ) {
			alert("这地没机构\r\n别瞎点！！！");
		  } else {
          //遍历取到provincesText 中的下标  去拿到对应的省js
			var cityinfo ;
			data[0].cities.forEach((item)=>{					
				if ( param.name == item.cityName)	{
					cityinfo = item ;
				}
			})
		  str = cityinfo.cityName;
		  str += "\r\n累计打卡数：" + cityinfo.videoCount + "次";
		  str += "\r\n在职总人数：" + cityinfo.employCount + "人";
		  str += "\r\n参与率为：" + cityinfo.participation + "%";
		  if (cityinfo.remark!=="") {
		    str += "\r\n------------\r\n" + cityinfo.remark;
		  }
		  //str += "<br>参与率为：" + cityinfo.videoCount + "%";
		  //document.getElementById('showinfo').innerHTML = str;
		  alert(str);
		}
      });    
    }

    // 展示对应的省
    function showProvince(pName, Chinese_) {
      //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
        loadBdScript('$' + Chinese_ + 'JS', './js/map/province/' + Chinese_ + '.js', function () {
        initEcharts(pName, Chinese_);
      });
    }

    // 加载对应的JS
    function loadBdScript(scriptId, url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      if (script.readyState) {  //IE
        script.onreadystatechange = function () {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {  // Others
        script.onload = function () {
          callback();
        };
      }
      script.src = url;
      script.id = scriptId;
      document.getElementsByTagName("head")[0].appendChild(script);
    };
  </script>
</body>

</html>
